/*- coding = utf-8 -*-
@Time : 2023/7/10 14:25
@Author : 管茂良
@File : useFunc.ts
@web  : www.php-china.com
@Software: WebStorm
*/

import {onMounted, ref, render, useAttrs, useSlots,h} from "vue";
import screenfull from "screenfull";

export const useFunc = (props: any) =>{
    let curImg = ref("");//当前图片
    let curImgIndex = ref(0);//当前图片索引
    let isFullscreen = ref(false);//是否全屏
    let curRotate = ref(0);//当前旋转

    //关闭窗口
    const handleClose = ()=>{
        document.documentElement.style.overflowY = 'scroll';
        let imgDialogTag:any = document.querySelector(".img-dialog")
        imgDialogTag.setAttribute("style","opacity:0")
        // console.log(imgDialogTag.setAttribute("opacity","0"));
        setTimeout(()=>{
            imgDialogTag.parentElement.remove()
        },500)

    }
    //上一张图片
    const handlePrevious = ()=>{
        if(curImgIndex.value>0){
            curImgIndex.value = curImgIndex.value-1
        }else{
            curImgIndex.value = props.imgList.length-1
        }
        curImg.value = props.imgList[curImgIndex.value]
    }
    //下一张图片
    const handleNext = ()=>{
        if(curImgIndex.value<props.imgList.length-1){
            curImgIndex.value = curImgIndex.value+1
        }else{
            curImgIndex.value = 0
        }
        curImg.value = props.imgList[curImgIndex.value]
    }
    //逆旋转
    const handleCounterRota = ()=>{
        let imgDialogTag:any = document.querySelector(".img-dialog")
        let imgTag = imgDialogTag.querySelector(".img")
        curRotate.value = curRotate.value - 90
        imgTag.setAttribute("style",`transition:transform 0.5s;transform:rotate(${curRotate.value}deg)`)
    }
    //顺旋转
    const handleClockwiseRota = ()=>{
        let imgDialogTag:any = document.querySelector(".img-dialog")
        let imgTag:any = imgDialogTag.querySelector(".img")
        curRotate.value = curRotate.value + 90
        imgTag.setAttribute("style",`transition:transform 0.5s;transform:rotate(${curRotate.value}deg)`)
    }
    //全屏
    const handleFullScreen = ()=>{
        if(!screenfull.isEnabled){
            // model.handleMsg("你的浏览器不支持全屏","warning")
            return
        }
        screenfull.toggle()
    }
    //初始化
    const handleInit = ()=>{
        curImg.value = props.imgList[curImgIndex.value]
        if (screenfull.isEnabled) {
            screenfull.on('change', handleChange)
        }
    }
    const handleChange = ()=>{
        isFullscreen.value = screenfull.isFullscreen
    }
    //放大图片
    const handleEnlargeImage = ()=>{
        let imgDialogTag:any = document.querySelector(".img-dialog")
        let imgTag:any = imgDialogTag.querySelector(".img")
        let imgWidth = Number((imgTag.offsetWidth*1.1).toFixed(0))
        let imgHeight = Number((imgTag.offsetHeight*1.1).toFixed(0))
        if(imgWidth<1000 && imgHeight<1000){
            imgTag.setAttribute("style","height:"+imgHeight+"px;width:"+imgWidth+"px")
        }
    }
    //缩小图片
    const handleZoomOutImage = ()=>{
        let imgDialogTag:any = document.querySelector(".img-dialog")
        let imgTag:any = imgDialogTag.querySelector(".img")
        let imgWidth = Number((imgTag.offsetWidth*0.9).toFixed(0))
        let imgHeight = Number((imgTag.offsetHeight*0.9).toFixed(0))
        if(imgWidth>150 && imgHeight>150){
            imgTag.setAttribute("style","height:"+imgHeight+"px;width:"+imgWidth+"px")
        }
    }
    //通过滚动修改图片大小
    const handleChangeImgSize = ()=>{
        let windowObj = window as any
        let documentObj = document as any
        windowObj.onmousewheel=documentObj.onmousewheel=(e)=>{
            if(e.wheelDelta<0){
                handleEnlargeImage()
            }else if(e.wheelDelta>0){
                handleZoomOutImage()
            }
        }
    }
    onMounted(()=>{
        handleChangeImgSize()
        handleInit()
    })
    return {
        curImgIndex,curImg,
        handleClose,handlePrevious,handleNext,handleCounterRota,handleClockwiseRota,handleFullScreen,handleEnlargeImage
        ,handleZoomOutImage,handleChangeImgSize
    }
}
